<template>
	<div class="usercard">
		<div class="usercard-content">
			<div class="usercard-userinfo">
				<div class="user-avatar">
					<el-image style="width: 80px; height: 80px" :src="STATIC_URL + avartar" fit="contain" />
				</div>
				<div class="user-info">
					<div class="nickname">风花雪月</div>
					<div class="user-qrcode">
						<el-image style="width: 20px; height: 20px" :src="STATIC_URL + qrcode" fit="contain" />
					</div>
				</div>
			</div>
			<div class="user-mobile">
				<div class="mobile">点击绑定手机号</div>
				<div class="mobile-button">去绑定</div>
			</div>
			<!-- <el-image style="width: 100%; height: 100px" :src="STATIC_URL + url" fit="contain" /> -->
		</div>
		<slot name="deles" />
	</div>
</template>
<script setup lang="ts" name="usercard">
import { STATIC_URL } from '/@/utils/config';
import { ref } from 'vue';
const avartar = ref('/static/images/shop/decorate/avatar.png');

const qrcode = ref('/static/images/shop/decorate/qrcode.png');
const url = ref('/static/shop/decorate/userCardStyle.png');

const props = defineProps({
	datas: {},
});
</script>
<style lang="scss" scoped>
.usercard {
	position: relative;
	min-height: 50px;
	background-color: #fff;
	.img-content {
		width: 100%;
	}

	.usercard-content {
		margin: 10px;
	}

	.nickname {
		padding-left: 20px;
	}

	.usercard-userinfo {
		display: flex;
		flex-direction: row;
		padding-bottom: 10px;
		align-items: center;
	}

	.user-info {
		display: flex;
		flex: 1;
		justify-content: space-between;
	}

	.user-mobile {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mobile-button {
		width: 52px;
		height: 26px;
		line-height: 26px;
		text-align: center;
		background: #ff6100;
		border-radius: 26px;
		color: #fff;
		font-size: 12px;
	}
}
</style>
